import React, { useState, useEffect } from 'react';
import openFilePreviewWindow from './FilePreviewWindow';
import CustomSelect from './CustomSelect';
import './AttachmentDropdown.css';

/**
 * 附件下拉框组件
 * @param {string} attachmentUrl - 附件文件名字符串（数据库中存储的是文件名，不是完整路径），可能是逗号分隔的多个文件名
 * @param {string} recordType - 记录类型（如 'journal', 'conference' 等）
 * @param {number} recordId - 记录ID
 */
const AttachmentDropdown = ({ attachmentUrl, recordType, recordId }) => {
  const [attachmentFiles, setAttachmentFiles] = useState([]);

  // 解析附件文件名字符串为文件列表
  useEffect(() => {
    if (!attachmentUrl || attachmentUrl.trim() === '') {
      setAttachmentFiles([]);
      return;
    }

    // 解析文件名字符串（支持逗号分隔的多个文件名）
    // 注意：数据库中存储的是文件名，不是完整路径
    const fileNames = attachmentUrl.split(',').map(name => name.trim()).filter(name => name);
    
    // 将文件名转换为文件信息对象
    const files = fileNames.map((fileName, index) => {
      return {
        name: fileName,
        fileName: fileName, // 保存文件名用于后续读取
        index: index
      };
    });

    setAttachmentFiles(files);
  }, [attachmentUrl]);

  // 预览文件的通用函数
  const previewFile = async (file) => {
    if (!file || !recordType || !recordId) return;

    // 通过 Electron API 读取文件并预览（根据文件名、记录类型、记录ID）
    try {
      // 如果存在 Electron API，使用文件名、记录类型、记录ID来读取文件
      if (window.electronAPI && window.electronAPI.getFileBlob) {
        const fileInfo = await window.electronAPI.getFileBlob(recordType, recordId, file.fileName);
        if (fileInfo && fileInfo.toFile) {
          const fileObj = fileInfo.toFile();
          openFilePreviewWindow(fileObj);
        } else {
          console.error('无法获取文件数据');
          alert(`无法预览文件: ${file.name}`);
        }
      } else {
        // 降级方案
        console.warn('Electron API 不可用，无法预览文件');
      }
    } catch (error) {
      console.error('预览文件失败:', error);
      alert(`无法预览文件: ${file.name}`);
    }
  };

  // 处理附件选择变化（只触发预览，不记录选中状态）
  const handleSelectChange = async (value) => {
    const index = parseInt(value);
    
    // 只触发预览，不更新选中状态
    const selectedFile = attachmentFiles[index];
    if (selectedFile) {
      await previewFile(selectedFile);
    }
  };

  // 处理预览按钮点击（用于单个文件的情况）
  const handlePreviewClick = async () => {
    // 单个文件时，直接使用第一个文件（索引为 0）
    if (attachmentFiles.length === 1) {
      await previewFile(attachmentFiles[0]);
    }
  };

  if (attachmentFiles.length === 0) {
    return <span className="attachment-dropdown__empty">暂无附件</span>;
  }

  // 如果只有一个文件，显示文件名和预览按钮
  if (attachmentFiles.length === 1) {
    return (
      <div className="attachment-dropdown">
        <div className="attachment-dropdown__single-file">
          <span className="attachment-dropdown__file-name">{attachmentFiles[0].name}</span>
          <button 
            className="attachment-dropdown__preview-btn"
            onClick={handlePreviewClick}
            title="预览文件"
          >
            预览
          </button>
        </div>
      </div>
    );
  }

  // 多个文件时使用自定义下拉框
  // 只显示文件列表，不包含占位选项
  const selectOptions = attachmentFiles.map((file, index) => ({
    value: index,
    label: file.name
  }));

  return (
    <div className="attachment-dropdown">
      <CustomSelect
        options={selectOptions}
        value={null}
        onChange={handleSelectChange}
        placeholder="选择文件"
        showSelected={false}
      />
    </div>
  );
};

export default AttachmentDropdown;

